// 聊天界面样式
.chat-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;

    // 消息列表区域
    &-messages {
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 0;

        // 消息项
        .message-item {
            margin-bottom: 32rpx;
            display: flex;
            align-items: flex-start;

            // 自己发送的消息
            &.message-me {
                flex-direction: row-reverse;

                .message-content {
                    background-color: #95ec69;
                    margin-right: 16rpx;
                    margin-left: 0;
                }

                .message-avatar {
                    margin-left: 16rpx;
                    margin-right: 0;
                }
            }

            // 对方发送的消息
            &.message-other {
                .message-content {
                    background-color: #fff;
                    margin-left: 16rpx;
                    margin-right: 0;
                }

                .message-avatar {
                    margin-right: 16rpx;
                    margin-left: 0;
                }
            }
        }

        // 消息内容
        .message-content {
            max-width: 70%;
            padding: 20rpx 24rpx;
            border-radius: 20rpx;
            position: relative;
            word-wrap: break-word;

            // 文本消息
            &.message-text {
                font-size: 32rpx;
                line-height: 1.4;
                color: #333;
            }

            // 图片消息
            &.message-image {
                padding: 8rpx;

                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 12rpx;
                    display: block;
                }
            }
        }

        // 消息头像
        .message-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            flex-shrink: 0;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        // 时间戳
        .message-time {
            text-align: center;
            font-size: 24rpx;
            color: #999;
            margin: 20rpx 0;
        }
    }

    // 输入框区域
    &-input {
        background-color: #fff;
        padding: 20rpx 32rpx env(safe-area-inset-bottom);
        border-top: 1rpx solid #e5e5e5;
        display: flex;
        align-items: center;
        position: relative;
        transition: padding-bottom 0.01s ease-out;

        // 输入框
        .input-field {
            flex: 1;
            background-color: #f8f8f8;
            border-radius: 20rpx;
            padding: 20rpx 32rpx;
            font-size: 32rpx;
            border: none;
            outline: none;
            margin-right: 20rpx;

            &::placeholder {
                color: #999;
            }
        }

        // 发送按钮
        .send-btn {
            min-width: 120rpx;
            height: 80rpx;
            background-color: #95ec69;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #fff;
            font-weight: 500;
            padding: 0 24rpx;
            transition: all 0.2s ease;

            &:active {
                background-color: #7dd85a;
                transform: scale(0.98);
            }

            &.disabled {
                background-color: #e5e5e5;
                color: #999;
                cursor: not-allowed;
            }
        }
    }
}

// 空状态
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    &-icon {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 32rpx;
        opacity: 0.3;
    }

    &-text {
        font-size: 28rpx;
        color: #999;
    }
}

// 加载状态
.chat-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 0;

    &-text {
        font-size: 28rpx;
        color: #999;
    }
}
